import type { FC } from 'react';
import { useRouter } from 'expo-router';
import dayjs, { type Dayjs } from 'dayjs';
import { FontAwesome } from '@expo/vector-icons';
import { View, ScrollView, Text } from 'react-native';
import { useMemoizedFn, useSetState } from 'ahooks';
import * as regexp from '@/constants/Regexp';
import { primaryColor } from '@/constants/Colors';
import useUserModel from '@/models/user';

import {
  Space,
  Button,
  Password,
  PageWrapper,
  CoverImage,
  HollowText,
  DateTime,
  EmailInput,
  message,
  Select,
  globalLoading
} from '@/components';

import styles from './styles';
import { waiting } from '@/utils/helper';

const genders = {
  female: 'Female',
  male: 'Male'
}

type FormDataType = {
  email: string;
  password: string;
  borthday: Dayjs;
  gender: any;
}

const Signup: FC = () => {
  const router = useRouter();
  const user = useUserModel();

  const [formData, setFormData] = useSetState<FormDataType>({
    email: '578091306@qq.com',
    password: '123456.',
    gender: "male",
    borthday: dayjs().subtract(18, 'years'),
  });

  const years = dayjs().diff(formData.borthday, 'years');

  const onSubmit = useMemoizedFn(async () => {
    const { email, password } = formData;
    if (!regexp.email.test(email)) {
      message.error('This is not a correct email address.');
      return;
    }
    if (!password.length) {
      message.error('The password needs to be at least 6 characters.');
      return;
    }

    globalLoading.open();
    await waiting(2000);
    globalLoading.close();
    user.login();
    router.replace('/profileSteps');
  });

  return (
    <PageWrapper>
      <View style={styles.wrapper}>
        <CoverImage style={styles.cover}>
          <HollowText fontSize={26}>
            CREATE AN ACCOUNT
          </HollowText>
        </CoverImage>
        <View style={styles.container}>
          <ScrollView style={styles.content}>
            <Space direction="vertical" size={20}>
              <EmailInput
                value={formData.email}
                placeholder="Email address"
                onChange={email => setFormData({ email })}
              />
              <Password
                placeholder="Password"
                value={formData.password}
                onChange={password => setFormData({ password })}
              />
              <Select
                valueEnum={genders}
                value={formData.gender}
                onChnage={gender => setFormData({ gender })}
                prefix={focus => (
                  <FontAwesome
                    size={22}
                    name="intersex"
                    color={focus ? primaryColor : '#aaa'}
                  />
                )}
              />
              <DateTime
                value={formData.borthday}
                onChange={borthday => setFormData({ borthday })}
              />
              <Text style={styles.tip}>
                <Text>By creating an account you agree to the </Text>
                <Text style={styles.link}>
                  Terms of Service
                </Text>
                <Text> and </Text>
                <Text style={styles.link}>
                  Privacy Policy
                </Text>.
              </Text>
              {years < 13 && (
                <Text style={styles.years_tip}>
                  You must 13 years of age or order to sign up.
                </Text>
              )}
            </Space>
            <View style={styles.submitter}>
              <Button
                round
                type="primary"
                title="Next"
                onPress={onSubmit}
                disabled={years < 13}
              />
            </View>
          </ScrollView>
        </View>
      </View>
    </PageWrapper>
  );
}

export default Signup;